<style lang="less">
  @import '../../../styles/common.less';
  @import 'draggable-list.less';
</style>

<template>
  <div>

    <Row class="margin-top-10">
      <Col span="16">
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          我的任务
        </p>
        <Row>
          <Col span="12">
          <Card dis-hover>
            <div style="height: 360px;">
              <ul id="affordList" class="iview-admin-draggable-list"></ul>
            </div>
          </Card>
          </Col>
          <Col span="12" class="padding-left-10">
          <Card dis-hover>
            <div style="height: 360px;">
              <ul id="shoppingList" class="iview-admin-draggable-list">
                <li v-for="(item, index) in shoppingList" :key="index" class="notwrap todolist-item" :data-index="index">
                  好吃的美食--{{ item.name }}
                </li>
              </ul>
            </div>
          </Card>
          </Col>
        </Row>
      </Card>
      </Col>
      <Col span="8" class="padding-left-10">
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          日历
        </p>
        <full-calendar id="calendar" type="ghost" :events="fcEvents" locale="zh" :config="config" @dayClick="dayClick" @eventClick="eventClick">

        </full-calendar>
      </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
  import Sortable from 'sortablejs';
  export default {
    name: 'draggable-list',
    data () {
      return {
        fcEvents : [
          {
            title  : 'event1',
            start  : '2018-01-01',
          },
          {
            title  : 'event2',
            start  : '2018-03-05',
            end    : '2018-03-07',
          },
          {
            title  : 'event3',
            start  : '2018-03-13T12:30:00',
            allDay : false,
          },
          {
            title     :  '测试',
            start     : '2018-03-01',
            cssClass  : 'family',
            YOUR_DATA : {
              aa:"aa"
            }
          }
        ],
        config: {
          weekends: false,
          drop(...args) {
            //handle drop logic in parent
          }
        },
        todoArray: [
          {
            content: '完成iview-admin基本开发'
          },
          {
            content: '对iview-admin进行性能优化'
          },
          {
            content: '对iview-admin的细节进行优化'
          },
          {
            content: '完成iview-admin开发'
          },
          {
            content: '解决发现的bug'
          },
          {
            content: '添加更多组件'
          },
          {
            content: '封装更多图表'
          },
          {
            content: '增加更多人性化功能'
          }
        ],
        doArray: [],
        shoppingList: [
          {name: '香肠'},
          {name: '烤鸭'},
          {name: '烧鸡'},
          {name: '卤煮'},
          {name: '酱汁腊肉'},
          {name: '松花小肚'},
          {name: '白丸子'},
          {name: '红丸子'},
          {name: '汆丸子'},
          {name: '蒸熊掌'},
          {name: '蒸羊羔'},
          {name: '蒸鹿尾'},
          {name: '梅菜扣肉'},
          {name: '四喜丸子'},
          {name: '酒酿萝卜皮'},
          {name: '红烧胖大海'},
          {name: '连年有鱼'}
        ],
        affordList: []
      };
    },
    mounted () {
      document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
      };
      let vm = this;

      let shoppingList = document.getElementById('shoppingList');
      Sortable.create(shoppingList, {
        group: {
          name: 'list',
          pull: true
        },
        animation: 120,
        ghostClass: 'placeholder-style',
        fallbackClass: 'iview-admin-cloned-item',
        onRemove (event) {
          vm.affordList.splice(event.newIndex, 0, vm.shoppingList[event.item.getAttribute('data-index')]);
        }
      });
      let affordList = document.getElementById('affordList');
      Sortable.create(affordList, {
        group: {
          name: 'list',
          pull: true
        },
        filter: '.iview-admin-draggable-delete',
        animation: 120,
        fallbackClass: 'iview-admin-cloned-item',
        onRemove (event) {
          vm.affordList.splice(event.oldIndex, 1);
        }
      });
      let calendar = document.getElementById('calendar');
      Sortable.create(calendar, {
        group: {
          name: 'list',
          pull: true
        },
        filter: '.iview-admin-draggable-delete',
        animation: 120,
        fallbackClass: 'iview-admin-cloned-item',
        onRemove (event) {
          vm.fcEvents.splice(event.oldIndex, 1);
        }
      });
    },
    methods:{
      eventClick(e){
        console.info(e)
        this.instance("confirm",e)
      },
      dayClick(e){
        console.info(e)
      },
      instance (type,e) {
        const title = 'Title';
        const content = '<p>'+e.title+'<p><p'+e.start+'></p>';
        switch (type) {
          case 'info':
            this.$Modal.info({
              title: title,
              content: content
            });
            break;
          case 'success':
            this.$Modal.success({
              title: title,
              content: content
            });
            break;
          case 'warning':
            this.$Modal.warning({
              title: title,
              content: content
            });
            break;
          case 'error':
            this.$Modal.error({
              title: title,
              content: content
            });
            break;
          case 'confirm':
            this.$Modal.confirm({
              title: title,
              content: content
            })
        }
      }
    }
  };
</script>
